//条目的水平布局（用于展示商品简要信息）（用在新人推荐栏目上）

import React, { PureComponent } from 'react'
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native'
import { Heading2, Heading3, Paragraph } from '../../widget/Text'
import { screen, system } from '../../common'
import { color } from '../../widget'

type Props = {
    info: Object,
    onPress: Function,
}


class SellGroupItem extends PureComponent<Props> {

    render() {
        let info = this.props.info

        let title = info.title
        let introduce = info.introduce
        let price = info.price
        let imageUrl = info.imageUrl

        return (
            <TouchableOpacity style={styles.container} onPress={this.props.onPress}>
                <View style={styles.leftContainer}>
                    <Heading3>{title}</Heading3>
                    <Paragraph>会员价:  ¥{price}</Paragraph>
                </View>
                <Image style={styles.image} resizeMode='contain' source={{ uri: imageUrl }} />
            </TouchableOpacity>
        )
    }
}


const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        padding: 10,
        width: screen.width,
        height: screen.width / 4,
        borderBottomWidth: screen.onePixel,
        borderColor: color.border,
        backgroundColor: 'white',
    },
    leftContainer: {
        flex: 1,
        paddingLeft: 10,
        paddingRight: 20
    },
    image: {
        width: screen.width / 7,
        height: screen.width / 7,
        borderRadius: 5,
        marginRight:40
    }
})

export default SellGroupItem
